<template>
  <div class="searchList">
    <van-nav-bar left-arrow title="商品列表" @click-left="$router.back()" />
    <van-search
      :value="querySearch || '搜索商品'"
      placeholder="请输入搜索关键词"
      show-action
      @click="$router.push('/search')"
    >
      <template #action>
        <div>
          <van-icon class="tool" name="apps-o" />
        </div>
      </template>
    </van-search>
    <!-- 排序选项按钮 -->
    <div class="sort-btn">
      <van-tabs v-model="sortType" @change="onSearch1">
        <van-tab name="all" title="综合"></van-tab>
        <van-tab name="sales" title="销量"></van-tab>
        <van-tab name="price" title="价格"></van-tab>
      </van-tabs>
    </div>

    <div class="goods-list">
      <GoodsItem1
        v-for="item in proList"
        :key="item.goods_id"
        :item="item"
      ></GoodsItem1>
    </div>
  </div>
</template>
<script>
import GoodsItem1 from '@/components/GoodsItem1.vue'
import { getProList } from '@/api/product'

export default {
  name: 'searchList',
  components: {
    GoodsItem1
  },
  data () {
    return {
      page: 1,
      proList: [],
      sortType: 'all'
    }
  },
  computed: {
    // 获取地址栏的搜索关键字
    querySearch () {
      return this.$route.query.search
    }
  },
  methods: {
    async onSearch () {
      const {
        data: {
          data: { list }
        }
      } = await getProList({
        goodsName: this.querySearch,
        page: this.page,
        sortType: this.sortType
      })
      this.proList = list.data
    },
    onSearch1 () {
      this.onSearch()
    }
  },
  created () {
    this.onSearch()
  }
}
</script>
<style lang="less" scoped>
.searchList {
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }

  .tool {
    font-size: 24px;
    height: 40px;
    line-height: 40px;
  }

  .sort-btn {
    height: 36px;
    line-height: 36px;
  }

  // 商品样式
  .goods-list {
    height: 100vh;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #f6f6f6;
  }
}
</style>
